<template>
	<view class="app-components-goods-layout-form-date-picker">
		<view class="app-components-goods-layout-form-date-picker__title e-flex e-flex-items-start">
			<view class="e-flex-1 e-flex e-flex-items-start">
				<text class="c-red e-p-r-8" v-if="info.hasRequired === 0">*</text>
				<text v-if="index">{{ index }}.</text>
				<view class="e-flex-1">
					<rich-text :nodes="info.title"></rich-text>
				</view>
			</view>
		</view>
		<view class="app-components-goods-layout-form-date-picker__sub-title" v-if="info.illustrate">
			<rich-text :nodes="info.illustrate"></rich-text>
		</view>
		<view class="e-m-b-10" v-else></view>
		<FormItemImg :info="info" />
		<view class="app-components-goods-layout-form-date-picker__input e-flex">
			<img src="/static/layoutForm/icon2.png" class="img-28 e-m-r-20" />
			<picker-select v-model="form.vle" pickerType="datetime-picker" :placeholder="$t('common.请选择')" suffixIconStyle="font-size:0"></picker-select>
		</view>
		<view class="app-components-goods-layout-form-date-picker__error e-flex" v-if="message">
			<image src="/static/layoutForm/error.png" class="img-40 e-m-r-22" />
			<text class="c-red">{{ message }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, toRef, inject, onMounted, onBeforeUnmount } from 'vue';
import type { GoodsFormDatePickerOption, LayoutFormModelValue } from '@/typings';
import FormItemImg from './formItemImg';
import { goodsLayoutFormContextKey } from '../tokens';
import type { GoodsLayoutFormItemContext } from '../tokens';

const props = withDefaults(
	defineProps<{
		value: LayoutFormModelValue;
		index: number;
		info: GoodsFormDatePickerOption;
		unitEn: string;
	}>(),
	{}
);
const emit = defineEmits(['update:value']);

const message = ref('');

const formContext = inject(goodsLayoutFormContextKey);

const form = computed({
	get() {
		return (
			props.value.find((item) => item.formOptionsId === props.info.id) || {
				formOptionsId: props.info.id,
				formOptionsInfoId: [],
				formOptionsInfoIdText: '',
				vle: '',
				vleid: ''
			}
		);
	},
	set(v) {
		const list = [...props.value];
		const index = props.value.findIndex((item) => item.formOptionsId === props.info.id);
		if (index > -1) {
			list.splice(index, 1, v);
		} else {
			list.push(v);
		}
		emit('update:value', list);
	}
});

watch(
	() => form.value.vle,
	() => {
		message.value = '';
	}
);

const context: GoodsLayoutFormItemContext = reactive({
	info: toRef(props, 'info'),
	message,
	form
});

onMounted(() => {
	formContext?.addField(context);
});
onBeforeUnmount(() => {
	formContext?.removeField(context);
});
</script>

<style lang="scss" scoped>
@include appBem_b(components-goods-layout-form-date-picker) {
	padding: 20rpx 30rpx 30rpx 30rpx;

	@include appBem_e(title) {
		padding: 20rpx 0;
		font-size: 32rpx;
	}
	@include appBem_e(sub-title) {
		margin-bottom: 20rpx;
	}

	@include appBem_e(input) {
		width: 400rpx;
	}

	@include appBem_e(error) {
		margin-top: 10rpx;
		padding: 0 16rpx;
	}
}
</style>
